<template>
<div>
  <div style="display: flex; padding: 10px; align-items: center;">
    <div>
      <van-icon name="arrow-left" size="25" @click="return1"/>
    </div>
    <div style="flex: 1;">
      <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" style="width: 100%"  @search="handleEnter"/>
    </div>
  </div>

  <van-dropdown-menu >
    <van-dropdown-item v-model="value1" :options="option1" @change="change"/>
    <van-dropdown-item v-model="value2" :options="option2" />
  </van-dropdown-menu>
  <van-card :thumb="item.img" v-for="item in products" :key="item.id" @click="router(item)">
    <template #desc>
      <div style="font-size: 14px" class="two-lines" id="your" :style="{width:width}">{{item.itemDescription}}</div>
    </template>
    <template #tags>
      <div style="margin-top: 5px">
      <span style="color:red;">￥</span><span style="font-size: 18px;color: red">{{item.price}}</span></div>
    </template>
    <template #price>
      <div style="margin-top: 5px">
<!--        <div style="font-size: 12px;color: #999">6条评论 好评率100%</div>-->
      </div>
    </template>
  </van-card>
</div>
</template>

<script>
import request from "../../utils/request";
import Vue from 'vue';
import { Icon } from 'vant';
import { Search } from 'vant';
import { Card } from 'vant';
import { DropdownMenu, DropdownItem } from 'vant';

Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Card);
Vue.use(Search);
Vue.use(Icon);
export default {
  data(){
    return{
      value:this.$route.query.name,
      products:[],
      value1: 0,
      value2: 'a',
      option1: [
        { text: '综合', value: 0 },
        { text: '价格最低', value: 1 },
        { text: '价格最高', value: 2 },
        { text: '评论最多', value: 3},
      ],
      option2: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' },
      ],
      width:null,
      itemId:this.$route.query.i,
    }
  },
  created() {
    this.getCatgories()
  },
  methods:{
    //回车全局搜索
    handleEnter(){
      this.getCatgories()
    },
    //跳转商品详情
    router(i){
      this.$router.push({
        name: 'productDetail', // 商品页的路由名称
        query: {
          i: i.id,
          itemId:this.itemId,
          price:i.price
        }
      });
    },
    getCatgories() {
      this.divWidth()
      request.post('/productDetails/getProducts',{"itemId":this.itemId,"conditon":this.value1,name:this.value}).then(resp=>{
        if (resp.code===0){
          this.products=resp.data
        }
      })

    },
    change(){
    this.getCatgories()
    },
  //  返回
    return1(){
      this.$router.push('/appCategory')
    },
  //  计算长度
    divWidth(){
      Vue.nextTick(() => {
        const divElement = document.getElementById('your');
        this.width = divElement.offsetWidth + 'px';
      });
    }
  }
}
</script>

<style scoped>
.two-lines {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-all;
}
</style>
